<script lang="tsx">
/**
 * 应付对账单
 */
export default {
  name: "pay-accounts"
}
</script>

<script lang="tsx" setup>
import {ref} from 'vue'
import {definePageModel, PageModel} from "@/frame/view/layout/page-model/constructor.ts"
import OrderForm from "./components/order-form/index.vue";
import OrderDetail from "./components/order-detail/index.vue";

/**
 * 页面配置
 */
const pageModelRef = ref()
const config = definePageModel<any>({
  url: "/api/PayAccounts",
  searchForm: {
    els: [
      {
        eType: 'el-input',
        prop: "code",
        props: {
          placeholder: "单据编码",
          clearable: true
        }
      },
      {
        eType: 'el-input',
        prop: "supplier",
        props: {
          placeholder: "供应商名称",
          clearable: true
        }
      }
    ]
  },
  programForm: {
    els: [
      {
        label: "新增",
        eType: "el-button",
        props: {
          type: "primary"
        },
        event: "add"
      }
    ]
  },
  table: {
    page: {
      enable: true,
      pageSize: 20
    },
    props: {
      stripe: false,
      border: false
    },
    operation: {
      width: 100,
      props: {
        fixed: "right"
      },
      els: [
        {
          eType: "el-button",
          label: "详情",
          event: "detail",
          props: {
            type: "primary",
            link: true
          },
          hide: false
        },
        {
          eType: "el-button",
          label: "删除",
          event: "delete",
          props: {
            type: "danger",
            link: true
          },
          hide: false
        }
      ]
    },
    els: [
      {
        label: "单据编码",
        prop: "code",
        minWidth: 100
      },
      {
        label: "供应商编码",
        prop: "supplierCode",
        minWidth: 100
      },
      {
        label: "供应商名称",
        prop: "supplierName",
        minWidth: 100
      },
      {
        label: "总金额",
        prop: "amount",
        minWidth: 100
      },
      {
        label: "未付款金额",
        prop: "payToDo",
        minWidth: 100
      },
      {
        label: "付款中金额",
        prop: "payDoing",
        minWidth: 100
      },
      {
        label: "已付款金额",
        prop: "payDone",
        minWidth: 100
      }
    ]
  }
})

/**
 * 详情
 */
const orderDetailRef = ref()
const handleDetail = (row: any) => {
  orderDetailRef.value.show({
    id: row.id
  })
}

/**
 * 新增
 */
const orderFormRef = ref()
const handleAdd = () => {
  orderFormRef.value.show()
}

/**
 * 删除
 */
const handleDelete = (row: any) => {
  pageModelRef.value.handleDelete(row)
}

/**
 * 刷新
 */
const handleRefresh = () => {
  pageModelRef.value.refreshTableData()
}

</script>

<template>
  <PageModel ref="pageModelRef" :PageModel="config" @add="handleAdd"
             @delete="handleDelete" @detail="handleDetail"
             @refresh="handleRefresh"
  />

  <OrderDetail ref="orderDetailRef"  @confirm="handleRefresh"/>

  <OrderForm ref="orderFormRef" @confirm="handleRefresh"/>
</template>